<template>
  <div id="UploadImage" ref="UploadImage" style="height: 100%; width: 100%">
    <el-container>
      <el-main>
        <el-upload
          drag
          id="upload"
          ref="upload"
          :auto-upload="false"
          v-show="status.isLoad"
          action=""
          :on-change="methods.setImage"
          :file-list="status.fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">Drop image file here or <em>click to upload</em></div>
          <template #tip>
            <div class="el-upload__tip" style="padding: 12px">
              jpg/png files with a size less than 10MB
            </div>
            <el-button type="primary" @click="$emit('closeOn')"
              >Continue without background</el-button
            >
          </template>
        </el-upload>
        <vue-cropper
          ref="cropper"
          :src="imgSrc"
          id="cropper"
          v-show="!status.isLoad"
          :containerStyle="cropperStyle"
        />
      </el-main>
      <el-footer v-show="!status.isLoad"
        ><el-button-group>
          <el-button type="primary" @click="methods.cropMode('move')">
            <SvgIcon icon-class="cursor" color="#fff"></SvgIcon>
          </el-button>
          <el-button type="primary" @click="methods.cropMode('crop')">
            <SvgIcon icon-class="crop" color="#fff"></SvgIcon>
          </el-button>
          <el-button type="primary" icon="el-icon-zoonin" @click="methods.zoom(0.1)">
            <SvgIcon icon-class="zoomIn" color="#fff"></SvgIcon>
          </el-button>
          <el-button type="primary" @click="methods.zoom(-0.1)">
            <SvgIcon icon-class="zoomOut" color="#fff"></SvgIcon
          ></el-button>
          <el-button type="primary" @click="methods.rotate(-90)">
            <SvgIcon icon-class="rotateLeft" color="#fff"></SvgIcon
          ></el-button>
          <el-button type="primary" @click="methods.rotate(90)">
            <SvgIcon icon-class="rotateRight" color="#fff"></SvgIcon
          ></el-button>
          <el-button type="primary" @click="methods.reset">
            <SvgIcon icon-class="clean" color="#fff"></SvgIcon
          ></el-button>
        </el-button-group>
        <el-button-group style="margin-left: 15px">
          <el-button type="primary" @click="methods.uploadImg">
            <SvgIcon icon-class="upload" color="#fff"></SvgIcon
          ></el-button>
          <el-button type="primary" @click="$emit('confirm', methods.getCropCanvas())">
            <SvgIcon icon-class="conform" color="#fff"></SvgIcon
          ></el-button>
        </el-button-group>
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, ref } from 'vue'
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
import { ElMessage } from 'element-plus'

export default defineComponent({
  emits: ['confirm', 'closeOn'],
  components: { VueCropper },
  setup() {
    const UploadImage = ref(null)
    const upload = ref(null)
    const cropper = ref(null)
    const status = reactive({
      isLoad: true,
      fileList: []
    })
    const cropperStyle = reactive({ height: '400px', width: '100%' })
    let imgSrc = null

    const methods = {
      zoom: (percent: number) => {
        ;(cropper.value as any).relativeZoom(percent)
      },
      cropMode: (model: string = 'move') => {
        ;(cropper.value as any).setDragMode(model)
      },
      reset: () => {
        ;(cropper.value as any).reset()
      },
      rotate: (deg: number = 90) => {
        ;(cropper.value as any).rotate(deg)
      },
      getCropCanvas: () => {
        imgSrc = (cropper.value as any).getCroppedCanvas().toDataURL()
        return imgSrc
      },
      setImage: (file: { raw: Blob }) => {
        if (file.raw.type.indexOf('image/') === -1) {
          ElMessage('Please select an image file')
          return
        }
        if (typeof FileReader === 'function') {
          const reader = new FileReader()
          reader.onload = (event) => {
            imgSrc = (event.target as any).result
            ;(cropper.value as any).replace(imgSrc)
            status.isLoad = false
          }
          reader.readAsDataURL(file.raw)
        } else {
          ElMessage('Sorry, FileReader API not supported')
        }
      },
      uploadImg: () => {
        status.fileList = status.fileList.slice(0, 0)
        status.isLoad = true
      }
    }
    onMounted(async () => {
      cropperStyle.height = `${(UploadImage.value as any).offsetHeight - 120}px`
    })

    return {
      UploadImage,
      upload,
      cropper,
      status,
      imgSrc,
      methods,
      cropperStyle
    }
  }
})
</script>

<style scoped>
.el-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-container {
  height: 100%;
  background-color: #f0f0f0;
}
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  margin: 8px;
  line-height: 60px;
}

.cropped-image img {
  max-width: 100%;
  max-height: 100%;
}
</style>
